import { PureComponent, Fragment } from "react";
import { Picker, DatePicker } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, combineDefaultStr, handleDateFunc, timeZero, timeMsec } from "../../../utils/helper"
import moment from "moment"
import MIcon from "../../MIcon"
interface Props {
	value?: any,
	is_now?: any,
	value_datatype?: string,
	type?: any,
	is_msec?: any,
	onChange?: Function,
	label?: string,
	required?: any,
	disabled?: any,
	show_label?: any,
	tips?: string,
	hasError: boolean,
	errorMsg: string,
	format?: string,
	text_align?: any,
	start?: any,
	end?: any
}
interface State {
	value: any,
	pickerStart: Date,
	pickerEnd: Date
}
export default class MyDatePicker extends PureComponent<Props, State> {
	public state: State = {
		value: this.props.value,
		pickerStart: new Date(moment().subtract(50, "years").format("YYYY/MM/DD")),
		pickerEnd: new Date(moment().add(50, "years").format("YYYY/MM/DD"))
	}

	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let { value } = nextProps;
			if (isNull(value)) {
				if (value === undefined) {
					let { is_now, value_datatype = "string" } = nextProps;
					let isNumber = value_datatype === "number";
					if (is_now == 1) {
						if (isNumber) {
							let now = moment();
							now = timeZero(now);
							this.changeValue(now)
						}
						else {
							this.changeValue(moment())
						}
					}
				}
			}
			else {
				if (value.toString().indexOf("get") != -1) {
					value = moment(handleDateFunc(value));
					this.changeValue(moment(value))
				}
			}
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		const { value_datatype = "string", type = "date", is_msec = 0 } = this.props;
		let isNumber = value_datatype === "number";
		let mFormat = "";
		if (isNull(value)) {

		}
		else {
			if (type == "year") {
				value.month(1);
				value.day(1);
				mFormat = "YYYY"
			}
			else if (type == "month") {
				value.day(1);
				mFormat = "YYYY-MM"
			}
			else {
				mFormat = "YYYY-MM-DD"
			}
			if (isNumber) {
				value = timeZero(value);
				// value = parseInt(value.valueOf() / 1000)
				value = parseInt((value.valueOf() / timeMsec(is_msec)).toString());
			}
			else {
				value = timeZero(value);
				value = value.format(mFormat)
			}
		}
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		value = moment(value);
		this.changeValue(value);
	};

	componentDidMount() {
		let { is_now = 0, value_datatype = "string", is_msec } = this.props;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		if (isNull(value)) {
			if (is_now == 1) {
				if (isNumber) {
					let now = moment();
					now = timeZero(now);
					this.changeValue(now)
				}
				else {
					this.changeValue(moment())
				}
			}
		}
		else {
			if (value.toString().indexOf("get") != -1) {
				value = moment(handleDateFunc(value));
				this.changeValue(moment(value))
			}
		}
	}
	render() {
		let { pickerStart, pickerEnd } = this.state;
		let { label, required, disabled, show_label, tips, type = "date", value_datatype = "string", hasError, errorMsg, format, is_msec = 0, start, end } = this.props;
		if (!isNull(start)) {
			if (start.toString().indexOf("get") == 0) {
				console.log(handleDateFunc(start))
				pickerStart = new Date(moment(handleDateFunc(start)).format("YYYY/MM/DD"))
			}
			else {
				if (moment(start).isValid()) {
					pickerStart=new Date(moment(start).format("YYYY/MM/DD"))
				}
			}
		}
		if (!isNull(end)) {
			if (end.toString().indexOf("get") == 0) {
				console.log(handleDateFunc(end))
				pickerEnd = new Date(moment(handleDateFunc(end)).format("YYYY/MM/DD"))
			}
			else {
				if (moment(end).isValid()) {
					pickerStart=new Date(moment(end).format("YYYY/MM/DD"))
				}
			}
		}
		let isDisabled = disabled == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let isNumber = value_datatype === "number";
		let isString = value_datatype === "string";

		if (isNull(value)) {

		}
		else {
			if (isNumber) {
				if (is_msec == 0) {
					value = value * 1000;
				}
				value = moment(value);
				if (type == "year") {
					value = value.format("YYYY")
				}
				else if (type == "month") {
					value = value.format("YYYY-MM")
				}
				else {
					value = value.format("YYYY-MM-DD")
				}
				value = new Date(value);
			}
			if (isString) {
				if (typeof value == "object") {
					value = moment(value).format(format);
				}
				value = new Date(value.replace(/-/g, "/"))
			}
		}
		/*if(isNull(value)){
			 
		}
		else{
			if(value.toString().indexOf("get") != -1){
				value = moment(handleDateFunc(value))
			}
			else{
				if(isNumber){
					// value = moment(value * 1000)
					value = moment(value*timeMsec(is_msec))
				}
				else{
					value = moment(value)
				}
			}
		}*/
		return (
			<DatePicker
				disabled={isDisabled}
				title={label}
				onChange={this.onChange}
				value={value}
				mode={type}
				minDate={pickerStart}
				maxDate={pickerEnd}
				format={(val) => {
					let year = val.getFullYear();
					if (isNaN(year)) {
						return;
					}
					let month: any = val.getMonth() + 1;
					month = month < 10 ? "0" + month : month;
					let day: any = val.getDate();
					day = day < 10 ? "0" + day : day;
					if (isNull(format)) {
						if (type == "year") {
							format = "YYYY"
						}
						else if (type == "month") {
							format = "YYYY-MM"
						}
						else {
							format = "YYYY-MM-DD"
						}
					}
					return format.replace("YYYY", year.toString()).replace("MM", month.toString()).replace("DD", day.toString())
				}}
			>
				<PickerLabel {...this.props} label={label} tips={tips} isShowLabel={isShowLabel} isRequired={isRequired} hasError={hasError} errorMsg={errorMsg} disabled={isDisabled} />
			</DatePicker>
		)
	}
}
interface PickerLabelProps extends Props {
	onClick?: Function,
	extra?: any,
	isRequired: boolean,
	isShowLabel: boolean,
	label_width?: any,
	label_text_color?: string,
	label_text_align?: any
	label_style?: any
	required_no_star?: any
}
class PickerLabel extends PureComponent<PickerLabelProps> {
	onClick = () => {
		let { onClick } = this.props;
		if (onClick) {
			onClick()
		}
	};
	render() {
		let { label_style, extra, label, tips, isRequired, isShowLabel, hasError, errorMsg, label_width, disabled, label_text_color, label_text_align = "left", text_align = "right", required_no_star,place_holder } = this.props;
		console.log("extra",extra,place_holder);
		if(extra=="请选择"&&!isNull(place_holder)){
			extra=place_holder
		}
		let requiredClass = "am-list-item am-input-item am-list-item-middle";
		if (isRequired && required_no_star != 1) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}

		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} onClick={(e) => {
					this.onClick()
				}} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color, ...label_style }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888" }} className="am-list-line" data-flex="dir:right">
						<span className="am-input-extra" onClick={(e) => {
							e.stopPropagation();
							onExtraClick();
						}}
						>
						</span>
						<div className="am-input-error-extra mi" onClick={(e) => {
							e.stopPropagation();
							MToast.info(errorMsg, 2, null, false)
						}}></div>
						{
							!disabled && <MIcon type="xiayiye" style={{ color: "rgb(187, 187, 187)" }} />
						}
						<span style={{ color: isNull(this.props.value) ? "rgb(187,187,187)" : "#000", textAlign: text_align, width: "100%" }}>
							{extra}
						</span>
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}
